<template>
  <div class="content">
    <div class="header">
      <span>合同详情</span>
      <el-button
        icon="View"
        @click="Preview"
        style="
          float: right;
          width: 110px;
          height: 40px;
        margin-right: 50px;
          border-radius: 20px;
          background-color: #eaeaea;
        "
        >预览</el-button
      >
    </div>
    <el-divider />
    <div class="contents">
      <div style="display: flex; flex-direction: column">
        <span style="color: #666">客户姓名</span>
        <span style="margin-top: 8px">{{list.name }}</span>
      </div>
      <div style="display: flex; flex-direction: column; margin-left: 245px">
        <span style="color: #666">购买学科</span>
        <span style="margin-top: 8px">{{list.subjectName}}</span>
      </div>
      <div style="display: flex; flex-direction: column; margin-left: 245px">
        <span style="color: #666">购买课程</span>
        <span style="margin-top: 8px">{{list.courseName}}</span>
      </div>
      <div style="display: flex; flex-direction: column; margin-left: 200px">
        <span style="color: #666">购买金额</span>
        <span style="margin-top: 8px">{{list.price}}</span>
      </div>
    </div>
    <div class="box">
      <div style="display: flex; flex-direction: column">
        <span style="color: #666">是否折扣</span>
        <span style="margin-top: 8px">是</span>
      </div>
      <div style="display: flex; flex-direction: column; margin-left: 245px">
        <span style="color: #666">创建时间</span>
        <span style="margin-top: 8px">{{list.createTime}}</span>
      </div>
      <div style="display: flex; flex-direction: column; margin-left: 151px">
        <span style="color: #666">折扣类型</span>
        <span style="margin-top: 8px">课程折扣</span>
      </div>
    </div>
    <div style="display: flex; justify-content: end; margin-right: 50px; margin-top: 40px">
      <el-button style="width: 92px; height: 40px; border-radius: 20px; background-color: #eaeaea" @click="back"
        >返回</el-button
      >
    </div>
    <el-dialog title="预览合同" v-model="showDiaLog" style="padding: 35px 50px;width: 1215px;">
      <el-divider />
      <p style="font-size: 40px;text-align:center">购销合同</p>
      <p style="font-size: 25px;">甲方:</p>
      <p style="font-size: 25px;margin-bottom: 40px;">乙方:</p>
      <span style="font-size: 25px;">根据《中华人民共和国合同法》及有关法律、法规规定，甲、乙双方本着平等、自愿、公平、互惠互利和诚实守信的原则.就产品供销的有关事宜协商一致订立本合同，以便共同遵守。</span>
      <p style="font-size: 25px;">一、合同价款及付款方式：</p>
      <span style="font-size: 25px;">本合同总价款为人民币元。本合同签订后，甲方向乙方  天支付定金  元，在乙方将上述产品送至甲方指定的地址并经甲方验收产品，甲方一次性将剩余款项付给乙方。</span>
      <p style="font-size: 25px;">二、产品质量:</p>
      <span style="font-size: 25px;">1、乙方保证所提供的产品货真价实，来源合法，无任何法律纠纷和质量问题，如果乙方所提供产品与第三方出现了纠纷，由此引起的一切法律后果均由乙方承担。</span>
      <span style="font-size: 25px;">2、如果甲方在使用上述产品过程中，出现产品质量问题，乙方负责调换产品，若不能调换，予以款项退还。</span>
      <p style="font-size: 25px;">三、违约责任</p>
      <span style="font-size: 25px;">1、甲乙双方均应全面履行本合同约定，一方违约给另一方造成损失的，应当承担赔偿责任。</span>
      <span style="font-size: 25px;">2、乙方未按合同约定供货的，按延迟供货的部分款，每延迟一日承担货款的万分之五违约金，延迟七日以上的，除支付违约金外，甲方有权解除合同。</span>
      <span style="font-size: 25px;">3、甲方未按照合同约定的期限结算的，应按照中国人民银行有关延期付款的规定，延迟一日，需支付结算货款的万分之五的违约金；延迟七日以上的，除支付违约金外，乙方有权解除合同。</span>
      <span style="font-size: 25px;">4、甲方不得无故拒绝接货，否则应当承担由此造成的损失费和运输费用。</span>
      <span style="font-size: 25px;">5、合同解除后，双方应当按照本合同的约定进行对帐和结算。</span>
      <p style="font-size: 25px;">四、其他约定事项</p>
      <span style="font-size: 25px;">本合同一式两份，自双方签字之日起生效。如果出现纠纷，双方均可向有管辖权的当地人民法院提起诉讼。</span>
      <p style="font-size: 25px;">五、其它事项：</p>
      <div style="font-size: 25px;">
        <span>甲</span>
        <span style="margin-left: 30px;">方:</span>
     
        <span style="margin-left: 200px;">乙</span>
        <span style="margin-left: 30px;">方:</span>
      </div>
      <div style="font-size: 25px;margin-top: 20px;">
        <span>开户银行:</span>
     
        <span style="margin-left: 180px;">开户银行:</span>
      </div>
      <div style="font-size: 25px;margin-top: 20px;">
        <span>账</span>
        <span style="margin-left: 30px;">号:</span>
     
        <span style="margin-left: 200px;">账</span>
        <span style="margin-left: 30px;">号:</span>
      </div>
      <div style="font-size: 25px;margin-top: 20px;">
        <span>开户行地址:</span>
     
        <span style="margin-left: 154px;">开户行地址:</span>
      </div>
      <div  style="font-size: 25px;margin-top: 20px;"><span>公 章:</span></div>
      <div style="font-size: 25px;margin-top: 20px;">签订日期 :______年_____月_____日</div>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref,onMounted } from 'vue'
import router from '@/router'
import {getContractDetail}from '@/api/contractManagement'
import { useRoute } from 'vue-router'
let $route = useRoute()
// import {getList} from '@/utils/auth'
const showDiaLog = ref(false)
const list = ref([])
const Preview = () => {
  showDiaLog.value = true
}

const back = () => {
  router.back()
}
const getContractDetailAPI = async () => {
  list.value = await getContractDetail($route.query.id)
  console.log(list.value);
  
}
onMounted(() => {
  getContractDetailAPI()
})
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  padding: 28px 25px 0px 32px;
}
.header {
  width: 100%;
  // height: 36px;
}
.contents {
  padding: 30px 25px;
  display: flex;
}
.box {
  padding: 0px 25px;
  display: flex;
}
:deep(.el-dialog__body){
    padding: 0 208px;
}
</style>
